"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
(function (win, p5) {

    //工具函数
    var global_id = {};
    /**
     * 创建全局唯一ID
     * @param {String} name id名
     */
    function create_id(name) {
        var idname = "global";
        if (!(name == undefined || name == "")) {
            idname = name;
        }
        if (global_id[idname] == undefined) {
            global_id[idname] = 0;
        }
        global_id[idname] = global_id[idname] + 1;
        return global_id[idname];
    }

    /**
     * 图层
     * 
     * 1 画布层 * 1 
     *      背景色，辅助线，标尺
     * 2 用户图层 * n
     * 3 文字标注层 * 1
     * 4 操作层
     * */
    var layer = /** @class */ (function () {
        function layer(name, index) {
            this.id = create_id("layer_id");
            this.name = name;
            this.index = index; // 0：背景图层，1-100用户图层，101：文字图层，102：操作控件图层
        }
        layer.prototype.add = function (component) {
            if (this.component_list == undefined) {
                this.component_list = {};
            }
            component.x_layer = this;
        }
        return layer;
    }());

    //图元组件
    var component = (function () {
        function component(p, x, y, w, h) {
            w = w < 2 ? 2 : w;
            h = h < 2 ? 2 : h;
            this.id = create_id();
            this.x = x + w / 2;
            this.y = y + h / 2;
            this.w = w;
            this.h = h;
            this.p = p;
            this.enable_move = true;
        }
        component.prototype.add = function (mdraw) {
            var that = this;
            var sprite = this.p.createSprite(this.x, this.y, this.w, this.h);
            this.sprite = sprite;
            sprite.onMousePressed = function () {
                if (that.enable_move && that.x_ismove != true) {
                    that.x_ismove = true;
                    that.x_mdx = that.p.mouseX - sprite.position.x;
                    that.x_mdy = that.p.mouseY - sprite.position.y;
                }
                console.log(that);
            };
            sprite.onMouseReleased = function () {
                if (that.enable_move && that.x_ismove != false) {
                    that.x_ismove = false;
                }
            };
            sprite.draw = function () {
                that.p.push();
                if (that.x_ismove && that.enable_move) {
                    that.p.set_shadow(3, 3, 10, "RGBA(127,127,127,0.6)");
                }
                mdraw(that);
                that.p.pop();
            };

        };
        component.prototype.update = function () {
            //console.log(this.id);
            if (this.enable_move && this.x_ismove) {
                this.x = this.p.mouseX - this.x_mdx;
                this.y = this.p.mouseY - this.x_mdy;
                this.sprite.position.x = this.x;
                this.sprite.position.y = this.y;
            }
        };
        component.prototype.get_depth = function () {
            return this.sprite.depth;
        }
        component.prototype.set_depth = function (depth) {
            this.sprite.depth = depth;
        }
        component.prototype.mouseWheel = function (that, x, y, deltaY) {
            var t_dx = x - that.sprite.position.x; //鼠标距离组件中心点的距离
            var t_dy = y - that.sprite.position.y;
            var oldscale = that.sprite.scale; //组件缩放值 1是原始大小
            // deltaY > 0 缩小 else 放大
            that.sprite.scale = deltaY > 0 ? oldscale - 0.1 : oldscale + 0.1; 
            that.sprite.position.x = x - t_dx * that.sprite.scale / oldscale; //等比移动组件位置
            that.sprite.position.y = y - t_dy * that.sprite.scale / oldscale;
        }
        return component;
    }());

    var rect = (function (_super) {
        __extends(rect, _super);
        function rect(p, x, y, w, h, r, g, b) {
            _super.call(this, p, x, y, w, h) || this;
            this.r = r;
            this.g = g;
            this.b = b;
        }
        rect.prototype.draw = function (that) {
            that.p.fill(that.r, that.g, that.b);
            that.p.rect(0, 0, that.w, that.h);
        }
        return rect;
    }(component));

    var line = (function (_super) {
        __extends(line, _super);
        function line(p, x1, y1, x2, y2, r, g, b) {
            _super.call(this, p, Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 - x2), Math.abs(y1 - y2)) || this;
            this.x1 = x1 - this.x;// - this.w / 2;
            this.y1 = y1 - this.y;// - this.h / 2;
            this.x2 = x2 - this.x;// - this.w / 2;
            this.y2 = y2 - this.y;// - this.h / 2;
            this.r = r;
            this.g = g;
            this.b = b;
        }
        line.prototype.draw = function (that) {
            that.p.stroke(that.r, that.g, that.b);
            //that.p.rect(0, 0, that.w, that.h);
            that.p.line(that.x1, that.y1, that.x2, that.y2);
            ///that.p.stroke(255, 0, 0);
            //that.p.text(that.sprite.position.x + "|" + that.sprite.position.y, 0, 0);
            //that.p.text(that.x1 + "|" + that.y1 + "|" + that.x2 + "|" + that.y2, 0, 20);
        };
        return line;
    }(component));

    var backgrid = (function (_super) {
        __extends(backgrid, _super);
        function backgrid(p) {
            console.log(p.width);
            _super.call(this, p, 0, 0, p.width, p.height) || this;
            this.enable_move = false;
        }
        backgrid.prototype.draw = function (that) {
            var dx = that.w / 2;
            var dy = that.h / 2;
            for (var i = 5; i < that.w; i += 5) {
                if (i % 50 != 0) {
                    that.p.stroke(230, 230, 230);
                }
                that.p.line(i - dx, 0 - dy, i - dx, dy);
                that.p.line(0 - dx, i - dy, dx, i - dy);
            }
            for (var i = 50; i < that.w; i += 50) {
                that.p.stroke(177, 177, 177);
                that.p.line(i - dx, 0 - dy, i - dx, dy);
                that.p.line(0 - dx, i - dy, dx, i - dy);
            }

        };
        return backgrid;
    }(component));

    var p53d = /** @class **/ (function () {
        function add_p5_func(p) {

            p.set_shadow = function (offsetX, offsetY, blur, color) {
                p.drawingContext.shadowOffsetX = offsetX;
                p.drawingContext.shadowOffsetY = offsetY;
                p.drawingContext.shadowBlur = blur;
                p.drawingContext.shadowColor = color;
            };
        }

        function p53d(docid) {
            var that = this;
            function procComponent(func) {
                for (var id in that.component_list) {
                    func(that.component_list[id]);
                }
            }
            var sketch = function (p) {
                add_p5_func(p);
                that.p = p;
                var x = 100;
                var y = 100;

                p.setup = function () {
                    var drawbox = document.getElementById(docid);
                    var myCanvas = p.createCanvas(drawbox.clientWidth, drawbox.clientHeight);
                    myCanvas.parent(docid);
                    for (var id in that.component_list) {
                        var d = that.component_list[id];
                        var obj = d.newobj();
                        obj.add(obj.draw);
                        that.component_list[id] = obj;
                    }
                };

                p.draw = function () {
                    p.background(255);
                    procComponent(d => d.update());
                    p.drawSprites();
                };
                p.mouseWheel = function (event) {
                    if (event.target.id === p.canvas.id) {
                        console.log(event);
                        procComponent(d => {
                            var mouse_wheel_func = d.mouseWheel;
                            if (mouse_wheel_func) {
                                mouse_wheel_func(d, event.offsetX, event.offsetY, event.deltaY);
                            }
                        });
                    }
                }
            };
            var myp5 = new p5(sketch);
        };
        p53d.prototype.init = function () {
            var that = this;
            var mgrid = {
                data: { p: that.p },
                newobj: function () {
                    return new backgrid(this.data.p);
                }
            };
            this.add(mgrid);
        };
        p53d.prototype.create_line = function (x1, y1, x2, y2, r, g, b) {
            var ddata = { p: this.p, x1: x1, y1: y1, x2: x2, y2: y2, r: r, g: g, b: b };
            return {
                data: ddata,
                newobj: function () {
                    var data = this.data;
                    return new line(data.p, data.x1, data.y1, data.x2, data.y2, data.r, data.g, data.b);
                }
            };
        };
        p53d.prototype.create_rect = function (x, y, w, h, r, g, b) {
            var ddata = { p: this.p, x: x, y: y, w: w, h: h, r: r, g: g, b: b };
            return {
                data: ddata,
                newobj: function () {
                    var data = this.data;
                    return new rect(data.p, data.x, data.y, data.w, data.h, data.r, data.g, data.b);
                }
            };
        };
        p53d.prototype.add = function () {
            if (this.component_list == undefined) {
                this.component_list = {};
            }
            for (var id in arguments) {
                var component = arguments[id];
                //component.add(arguments[id].draw);
                component.id = create_id();
                console.log(component);
                this.component_list[component.id] = component;
            }
        };

        return p53d;
    }());


    win.p53dxh = p53d;
}(window, p5));